<template>
    <div>
        <el-dialog :visible.sync="editDialogVisible" title="修改管理员信息">
            <el-form :model="air" :rules="rules" ref="airForm" label-width="100px" style="width: 500px;"
                     size="small ">
                <el-form-item label="请选择机型" prop="AirCode"  >
                    <el-select v-model="air.airCode" clearable placeholder="请选择机型" style="width: 400px;float: left">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="购买头等舱" prop="airFna">
                    <el-select v-model="air.airFna" clearable placeholder="请选择是否购买公头等舱" style="width: 400px;float: left">
                        <el-option
                                v-for="item in airFna_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="头等舱人数" prop="airF">
                    <el-input v-model="air.airF" placeHolder="请输入头等舱人数" style="width: 400px;float: left"/>
                </el-form-item>

                <el-form-item label="购买公务舱" prop="airCna"  >
                    <el-select v-model="air.airCna" clearable placeholder="请选择是否购买公务舱" style="width: 400px;float: left">
                        <el-option
                                v-for="item in airCna_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="公务舱人数" prop="airC" >
                    <el-input v-model="air.airC" placeHolder="请输入公务舱人数" style="width: 400px;float: left"/>
                </el-form-item>

                <el-form-item label="购买经济舱" prop="airYna">
                    <el-select v-model="air.airYna" clearable placeholder="请选择是否购买经济舱" style="width: 400px;float: left">
                        <el-option
                                v-for="item in airYna_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="经济舱人数" prop="airY">
                    <el-input v-model="air.airY" placeHolder="请输入经济舱人数" style="width: 400px;float: left"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="update" :disabled="btnSts">确定修改</el-button>
                    <el-button @click="editDialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-breadcrumb separator-class="el-icon-arrow-right"
                       style="background-color:white;padding: 8px;margin-bottom: 20px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>机型管理</el-breadcrumb-item>
            <el-breadcrumb-item>机型维护</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="airList" width="100%">
            <el-table-column prop="airCode" label="飞机机型"></el-table-column>
            <el-table-column prop="airFna" label="头等舱" :formatter="airFnaFormatter"></el-table-column>
            <el-table-column prop="airF" label="头等舱人数"></el-table-column>
            <el-table-column prop="airCna" label="商务舱" :formatter="airCnaFormatter"></el-table-column>
            <el-table-column prop="airC" label="商务舱人数"></el-table-column>
            <<el-table-column prop="airYna" label="经济舱" :formatter="airYnaFormatter"></el-table-column>
            <el-table-column prop="airY" label="经济舱人数"></el-table-column>
            <el-table-column prop="airTotal" label="总人数"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editAir(scope.$index,scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleteAir(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                style="margin-top: 10px"
                background
                layout="prev, pager, next"
                :current-page.sync="pageInfo.pageNum"
                :page-count="pageInfo.pages"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="this.findList"

        >
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "AirList",
        /*created生命周期钩子函数，created在页面加载完毕后，但是还没渲染的时候执行*/
        created() {
            this.findList();
        },
        methods: {
            /**
             * 获取表格内数据
             */
            findList() {
                axios.post("/air/page", {
                    pageNum: this.pageInfo.pageNum,
                    pageSize: this.pageInfo.pageSize,
                    condition: {}
                }).then(resp => {
                    this.pageInfo.pageSize = resp.data.pageSize;
                    this.pageInfo.pageNum = resp.data.pageNum;
                    this.pageInfo.total = resp.data.total;
                    this.pageInfo.pages = resp.data.pages;
                    //将数据赋值给manager表格数据
                    this.airList = resp.data.list;
                    //console.log(resp.data);
                })
            },


            deleteAir(index, row) {
                this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发生请求去删除对应的数据
                    axios.delete("/air/delete/" + row.id).then(resp => {
                        if (resp.data === "success") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                        //重新获取表格数据
                        this.findList();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            airFnaFormatter(row/*,column*/) {
                //如果是m，返回：男，否则返回女
                return row.airFna === '存在' ? "存在" : "不存在";
            },
            airYnaFormatter(row/*,column*/) {
                //如果是m，返回：男，否则返回女
                return row.airYna === '存在' ? "存在" : "不存在";
            },
            airCnaFormatter(row/*,column*/) {
                //如果是m，返回：男，否则返回女
                return row.airCna === '存在' ? "存在" : "不存在";
            },
            editAir(index, row) {
                //记录下原来的用户名
                this.vaCode = row.airCode;
                //弹出一个可以修改输入用户信息的表单窗口
                this.editDialogVisible = true;
                //克隆row
                let clone = _.clone(row);
                clone.checkPass = "";
                this.air = clone;
            },
            update() {
                //将提交按钮设置为不可用状态 按钮动态加disable属性
                this.btnSts = true;
                //1、先验证表单格式没问题了，再允许发送请求
                this.$refs['airForm'].validate((valid) => {
                    if (valid) {
                        //clone对象


                        if(this.air.airFna=="不存在"&&this.air.airYna=="不存在"&&this.air.airCna=="不存在"){
                            this.air.airTotal=0;
                            this.air.airF=0;
                            this.air.airY=0;
                            this.air.airC=0;
                        }
                        if(this.air.airFna=="不存在"&&this.air.airYna=="不存在"&&this.air.airCna=="存在"){
                            this.air.airTotal=parseInt(this.air.airC);
                            this.air.airF=0;
                            this.air.airY=0;
                        }
                        if(this.air.airYna=="不存在"&&this.air.airCna=="不存在"&&this.air.airFna=="存在"){
                            this.air.airTotal=parseInt(this.air.airF);
                            this.air.airY=0;
                            this.air.airC=0;
                        }
                        if(this.air.airCna=="不存在"&&this.air.airFna=="不存在"&&this.air.airYna=="存在"){
                            this.air.airTotal=parseInt(this.air.airY);
                            this.air.airF=0;
                            this.air.airC=0;
                        }
                        if(this.air.airCna=="不存在"&&this.air.airFna=="存在"&&this.air.airYna=="存在"){
                            this.air.airTotal=parseInt(this.air.airY)+parseInt(this.air.airF);
                            this.air.airC=0;
                        }
                        if(this.air.airYna=="不存在"&&this.air.airCna=="存在"&&this.air.airFna=="存在"){
                            this.air.airTotal=parseInt(this.air.airC)+parseInt(this.air.airF);
                            this.air.airY=0;
                        }
                        if(this.air.airFna=="不存在"&&this.air.airYna=="存在"&&this.air.airCna=="存在"){
                            this.air.airTotal=parseInt(this.air.airY)+parseInt(this.air.airC);
                            this.air.airF=0;
                        } if(this.air.airFna=="存在"&&this.air.airYna=="存在"&&this.air.airCna=="存在"){
                            this.air.airTotal=parseInt(this.air.airY)+parseInt(this.air.airC)+parseInt(this.air.airF);
                        }





                        let payLoad = _.clone(this.air);
                        //删除payLoad的checkPass属性
                        delete payLoad.checkPass;
                        // 进行表单的提交
                        axios.post("/air/save", payLoad).then(response => {
                            this.btnSts = false;
                            if (response.data === 'success') {
                                this.$notify({
                                    title: "提示",
                                    message: "用户保存成功",
                                    type: "success"
                                });
                                //一旦提交成功，自动关闭窗口
                                this.editDialogVisible = false;
                                //刷新表格数据
                                this.findList();
                            }
                        })
                    } else {
                        this.btnSts = false;
                        return false;
                    }
                })
            }
        },
        data() {
            //通过正则验证数字
            let validF = (rules, value, callback) => {
                /*if (!value || value === '') {
                    return callback(new Error("数量不能为空"));
                }*/
                let pattern = /^([1-9]|[12][0-9]|30)$/;
                if (!pattern.test(value)) {
                    return callback(new Error("头等舱的容纳人数应在1-30之间，请重新输入"))
                }
                return callback();
            };
            let validC = (rules, value, callback) => {
                /*if (!value || value === '') {
                    return callback(new Error("数量不能为空"));
                }*/
                let pattern = /^([1-9]|[12][0-9]|30)$/;
                if (!pattern.test(value)) {
                    return callback(new Error("商务的容纳人数应在1-30之间，请重新输入"))
                }
                return callback();
            };
            let validY = (rules, value, callback) => {
                /* if (!value || value === '') {
                     return callback(new Error("数量不能为空"));
                 }*/
                let pattern = /^([1-9]|[12][0-9]|30)$/;
                if (!pattern.test(value)) {
                    return callback(new Error("经济舱的容纳人数应在1-30之间，请重新输入"))
                }
                return callback();
            };
            return {


                options: [{
                    value: '波音747',
                    label: '波音747'
                }, {
                    value: '波音743',
                    label: '波音743'
                }, {
                    value: '波音742',
                    label: '波音742'
                }, {
                    value: '波音741',
                    label: '波音741'
                }, {
                    value: '波音740',
                    label: '波音740'
                }],
                airFna_options: [{
                    value: '存在',
                    label: '购买'
                }, {
                    value: '不存在',
                    label: '不购买'
                }],
                airYna_options: [{
                    value: '存在',
                    label: '购买'
                }, {
                    value: '不存在',
                    label: '不购买'
                }],
                airCna_options: [{
                    value: '存在',
                    label: '购买'
                }, {
                    value: '不存在',
                    label: '不购买'
                }],





                //pageInfo对象实际是从后台查询得到的，代表了分页必要的信息
                pageInfo: {
                    pageNum: 1, /*当前是那一页*/
                    pageSize: 10, /*每页展示多少条*/
                    pages: 10, /*总共有多少页*/
                    total: 100 /*总共有多少条数据*/
                },
                editDialogVisible: false,
                air: {},
                btnSts: false,
                vaAccount: '',/*记录原来的用户名*/
                airList: [],
                rules: {
                    airF: [
                        {validator: validF, trigger: "blur"}
                    ],
                    airY: [
                        {validator: validY, trigger: "blur"}
                    ],
                    airC: [
                        {validator: validC, trigger: "blur"}
                    ],
                    airCode: [
                        {required: true, message: "请选择机型", trigger: "blur"}
                    ],
                }

            }
        }
    }
</script>
<style scoped>

</style>